@mixin button-variant( $background, $border: $background, $hover-background: darken($background, 5%), $hover-border: $hover-background, $hover-box-shadow: 0 4px 10px rgba($background, .25), $active-background: darken($background, 5%), $active-border: darken($border, 10%), $active-box-shadow: inset 0 3px 5px rgba($black, .125)) {
  &:focus,
  &.focus {
    box-shadow: 0 0 0 3px rgba($background, .25), 0 3px 15px rgba($background, 0.2), 0 2px 5px rgba($black, .1);
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show>&.dropdown-toggle {
    box-shadow: 0 0 0 3px rgba($background, .25), 0 3px 15px rgba($background, 0.2), 0 2px 5px rgba($black, .1) !important;
  }
}

@mixin button-outline-variant( $color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
  $button-text-color: $color; // Fix light or white outlined buttons

  @if ($color==theme-color("light") or $color==$white) {
    $button-text-color: color-yiq($color);
  }

  color: $button-text-color;

  &:focus,
  &.focus {
    box-shadow: 0 0 0 3px rgba($color, .25), 0 3px 15px rgba($color, 0.2), 0 2px 5px rgba($black, .1) !important;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show>&.dropdown-toggle {
    &:focus {
      box-shadow: 0 0 0 3px rgba($color, .25), 0 3px 15px rgba($color, 0.2), 0 2px 5px rgba($black, .1) !important;
    }
  }
}
